<template>
  <view class="bottle-detail-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="back-button" @click="handleBack">‹</text>
    </view>

    <!-- 发送者信息 -->
    <view class="sender-info">
      <view class="avatar">{{ senderAvatar }}</view>
      <view class="nickname">{{ senderNickname }}</view>
    </view>

    <!-- 瓶子内容 -->
    <view class="content-container">
      <view class="letter" :class="{ unfolded: isUnfolded }">
        {{ bottleContent }}
      </view>
    </view>

    <!-- 操作栏 -->
    <view class="action-bar">
      <!-- 收藏前的操作 -->
      <view 
        class="action-group" 
        :class="{ active: !isCollected }"
        v-if="!isCollected"
      >
        <button 
          class="action-button-large throw-back" 
          @click="handleThrowBack"
        >
          扔回大海
        </button>
        <button 
          class="action-button-large collect" 
          @click="handleCollect"
        >
          收藏瓶子
        </button>
      </view>

      <!-- 收藏后的操作 -->
      <view 
        class="action-group" 
        :class="{ active: isCollected }"
        v-if="isCollected"
      >
        <button 
          class="action-button emoji-button" 
          :class="{ active: selectedEmoji === '😊' }"
          @click="handleEmojiClick('😊')"
        >
          😊
        </button>
        <button 
          class="action-button emoji-button" 
          :class="{ active: selectedEmoji === '🥲' }"
          @click="handleEmojiClick('🥲')"
        >
          🥲
        </button>
        <button 
          class="action-button emoji-button" 
          :class="{ active: selectedEmoji === '😮' }"
          @click="handleEmojiClick('😮')"
        >
          😮
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { useBottleStore } from '@/store/bottle'
import { useUserStore } from '@/store/user'

export default {
  name: 'BottleDetailPage',
  data() {
    return {
      isUnfolded: false,
      isCollected: false,
      selectedEmoji: null
    }
  },
  
  computed: {
    bottleStore() {
      return useBottleStore()
    },
    
    userStore() {
      return useUserStore()
    },
    
    /**
     * 当前瓶子
     */
    currentBottle() {
      return this.bottleStore.currentBottle
    },
    
    /**
     * 瓶子内容
     */
    bottleContent() {
      return this.currentBottle?.content || '暂无内容'
    },
    
    /**
     * 发送者头像
     */
    senderAvatar() {
      if (!this.currentBottle?.sender) return '❓'
      
      // 如果是匿名，显示默认头像
      if (this.currentBottle.isAnonymous) {
        return '❓'
      }
      
      return this.currentBottle.sender.avatar || '🧑‍🚀'
    },
    
    /**
     * 发送者昵称
     */
    senderNickname() {
      if (!this.currentBottle?.sender) return '神秘的漂流者'
      
      // 如果是匿名，显示匿名用户
      if (this.currentBottle.isAnonymous) {
        return '一位匿名的宇航员'
      }
      
      return this.currentBottle.sender.nickname || '神秘的漂流者'
    }
  },
  
  onLoad() {
    console.log('瓶子详情页面加载')
    this.initPage()
  },
  
  methods: {
    /**
     * 初始化页面
     */
    initPage() {
      // 检查是否有当前瓶子
      if (!this.currentBottle) {
        uni.showToast({
          title: '瓶子不存在',
          icon: 'none'
        })
        
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
        return
      }
      
      // 延迟展开动画
      setTimeout(() => {
        this.isUnfolded = true
      }, 300)
    },
    
    /**
     * 处理返回
     */
    handleBack() {
      uni.navigateBack()
    },
    
    /**
     * 处理扔回大海
     */
    async handleThrowBack() {
      try {
        const result = await this.bottleStore.throwBackBottle(this.currentBottle)
        
        if (result.success) {
          uni.showToast({
            title: '已扔回大海',
            icon: 'success'
          })
          
          // 延迟返回
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        } else {
          uni.showToast({
            title: result.message || '操作失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('扔回瓶子失败:', error)
        uni.showToast({
          title: '操作失败',
          icon: 'error'
        })
      }
    },
    
    /**
     * 处理收藏瓶子
     */
    async handleCollect() {
      try {
        const result = await this.bottleStore.collectBottle(this.currentBottle)
        
        if (result.success) {
          this.isCollected = true
          
          uni.showToast({
            title: '收藏成功',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: result.message || '收藏失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('收藏瓶子失败:', error)
        uni.showToast({
          title: '收藏失败',
          icon: 'error'
        })
      }
    },
    
    /**
     * 处理表情点击
     */
    handleEmojiClick(emoji) {
      this.selectedEmoji = emoji
      
      // 播放动画效果
      const button = event.currentTarget
      button.style.animation = 'none'
      button.offsetHeight // 触发重排
      button.style.animation = 'jelly 0.5s'
      
      console.log('情感反馈:', emoji)
      
      uni.showToast({
        title: `感谢你的反馈 ${emoji}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bottle-detail-page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
  color: var(--text-light);
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-header {
  padding: 40rpx;
  padding-top: 100rpx; /* 适配状态栏 */
  flex-shrink: 0;
  position: relative;
  text-align: center;
  
  .back-button {
    position: absolute;
    left: 40rpx;
    top: 100rpx;
    font-size: 48rpx;
    color: var(--text-light);
    font-weight: 300;
  }
}

.sender-info {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 0 40rpx 40rpx 40rpx;
  
  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: var(--lighter-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40rpx;
  }
  
  .nickname {
    font-size: 32rpx;
    font-weight: 500;
    color: var(--text-light);
  }
}

.content-container {
  flex: 1;
  margin: 0 40rpx;
  overflow-y: auto;
  perspective: 1000px;
  
  /* 自定义滚动条 */
  &::-webkit-scrollbar {
    width: 8rpx;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  
  &::-webkit-scrollbar-thumb {
    background: var(--text-dark);
    border-radius: 8rpx;
  }
}

.letter {
  background-color: var(--paper-bg);
  color: var(--text-on-paper);
  padding: 60rpx;
  border-radius: 10rpx;
  font-family: 'Kaiti SC', 'STKaiti', 'KaiTi', sans-serif;
  font-size: 36rpx;
  line-height: 2;
  min-height: 100%;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
  transform-origin: top center;
  transform: rotateX(-90deg);
  opacity: 0;
  transition: all 0.8s ease-out;
  
  &.unfolded {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

.action-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180rpx;
  background-color: rgba(27, 38, 59, 0.8);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid rgba(119, 141, 169, 0.2);
  padding: 0 40rpx;
}

.action-group {
  display: none;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  gap: 40rpx;
  
  &.active {
    display: flex;
  }
}

.action-button-large {
  flex: 1;
  padding: 30rpx;
  border-radius: 60rpx;
  border: none;
  font-size: 32rpx;
  font-weight: 500;
  transition: all 0.2s ease;
  
  &:active {
    transform: scale(0.96);
  }
  
  &.collect {
    background-color: var(--accent-gold);
    color: var(--primary-bg);
  }
  
  &.throw-back {
    background-color: transparent;
    border: 2rpx solid var(--text-dark);
    color: var(--text-light);
  }
}

.action-button {
  background: none;
  border: none;
  font-size: 56rpx;
  transition: transform 0.2s ease;
  padding: 20rpx;
  
  &.active {
    animation: jelly 0.5s;
  }
}

.emoji-button {
  &.active {
    color: var(--accent-gold);
  }
}

@keyframes jelly {
  0%, 100% { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}
</style> 